<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/jsp/common/taglib.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Pagination 分页表格</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script src="<c:url value="/js/boot.js"/>" type="text/javascript"></script>
</head>
<body>
	<h1>Pagination 分页表格</h1>

	<div style="padding-bottom: 5px;">

		<span>员工姓名：</span><input type="text" id="key" /> <input
			type="button" value="查找" onclick="search()" />


	</div>
	<div id="datagrid1" class="mini-datagrid"
		style="width: 700px; height: 280px;" url="http://www.miniui.com/demo/data/AjaxService.aspx?method=SearchEmployees" idField="id"
		allowResize="true" sizeList="[20,30,50,100]" pageSize="20">
		<div property="columns">
			<div type="indexcolumn"></div>
			<div field="loginname" width="120" headerAlign="center"
				allowSort="true">员工帐号</div>
			<div field="name" width="120" headerAlign="center" allowSort="true">姓名</div>
			<div field="gender" width="100" renderer="onGenderRenderer"
				align="center" headerAlign="center">性别</div>
			<div field="salary" dataType="currency" currencyUnit="￥"
				align="right" width="100" allowSort="true">薪资</div>
			<div field="age" width="100" allowSort="true">年龄</div>
			<div field="createtime" width="100" headerAlign="center"
				dateFormat="yyyy-MM-dd" allowSort="true">创建日期</div>
		</div>
	</div>

	<script type="text/javascript">
		mini.parse();

		var grid = mini.get("datagrid1");

		grid.load();

		//对"createtime"字段，进行降级排序
		grid.sortBy("createtime", "desc");

		function search() {
			var key = document.getElementById("key").value;
			grid.load({
				key : key
			});
		}
		$("#key").bind("keydown", function(e) {
			if (e.keyCode == 13) {
				search();
			}
		});
		///////////////////////////////////////////////////////
		var Genders = [ {
			id : 1,
			text : '男'
		}, {
			id : 2,
			text : '女'
		} ];
		function onGenderRenderer(e) {
			for (var i = 0, l = Genders.length; i < l; i++) {
				var g = Genders[i];
				if (g.id == e.value)
					return g.text;
			}
			return "";
		}
	</script>

	<div class="description">
		<h3>Description</h3>

	</div>
</body>
</html>